<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My Clock</title>

    <style>
        body {
            background-color: #289a61;;
        }

        canvas {
            background: white;
        }
    </style>
    <script>
        window.onload = function () {
            function toDraw(hour, minutes, seconds, mills) {

                var dt = new Date();
                var hour = dt.getHours();
                var minutes = dt.getMinutes();
                var seconds = dt.getSeconds();
                var mills = dt.getMilliseconds();

                var obc = document.getElementById('canvas');
                obc = obc.getContext('2d');
                for (var i = 0; i < 60; i++) {
                    obc.moveTo(200, 200);
                    obc.arc(200, 200, 150, i * Math.PI / 30, 6 * (i + 1) * Math.PI / 180, false);
                    obc.stroke();
                }
                obc.beginPath();
                obc.moveTo(200, 200);
                obc.fillStyle = 'white';
                obc.arc(200, 200, 145, 0, 2 * Math.PI, false);
                obc.fill();
                obc.closePath();
                obc.beginPath();
                for (var i = 0; i < 60; i++) {
                    obc.moveTo(200, 200);
                    if (i % 5 == 0) {
                        obc.arc(200, 200, 150, i * Math.PI / 30, Math.PI / 30, false);
                    }
                    obc.stroke();
                }
                obc.closePath();

                obc.beginPath();
                obc.moveTo(200, 200);
                obc.fillStyle = 'white';
                obc.arc(200, 200, 140, 0, 2 * Math.PI, false);
                obc.fill();
                obc.closePath();

                obc.beginPath();
                obc.moveTo(200, 200);
                obc.arc(200, 200, 120, (seconds+mills/1000) * 6 * Math.PI / 180 - Math.PI / 2, (seconds+mills/1000) * 6 * Math.PI / 180 - Math.PI / 2);
                obc.stroke();
                obc.closePath();

                obc.beginPath();
                obc.moveTo(200, 200);
                obc.arc(200, 200, 105, (minutes+seconds/60) * 6 * Math.PI / 180 - Math.PI / 2, (minutes+seconds/60) * 6 * Math.PI / 180 - Math.PI / 2);
                obc.stroke();
                obc.closePath();

                obc.beginPath();
                obc.moveTo(200, 200);
                obc.arc(200, 200, 75, (hour+minutes/60) * 30 * Math.PI / 180 - Math.PI / 2 , (hour+minutes/60) * 30 * Math.PI / 180 - Math.PI / 2 );
                obc.stroke();
                obc.closePath();
            }

            setInterval(toDraw, 10);
        }

    </script>

</head>
<body>
<canvas id="canvas" height="400" width="400">

</canvas>
</body>
</html>